<template>
	<view class="myself">
		<template>
			<view>
				<view class="headbox">
					<view class="main">
						<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" mode=""></image>
					</view>
					<view class="main1">
						<text class="headtext">张怀民</text>
					</view>
				</view>
				<view class="content">
					<view class="contenttext">
						个人管理
					</view>
					<view class="conten">
						<view class="onecont">消息通知</view>
						<view class="oneconts">更多</view>
						<view class="oneconts">设置</view>
						<view class="oneconts">关于自己</view>
					</view>
					<view class="foot">
						<button class="btn" @click="back()">退出登录</button>
					</view>
				</view>
		
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.showModal({
					title: '提示',
					content: '是否退出登录',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userData');
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							// 出现提示
							uni.showToast({
								title: '取消退出',
								icon: 'none'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.foot {
		margin-top: 60rpx;
	}

	.btn {
		width: 400rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: white;
		background-color: #E64340;
		border-radius: 10rpx;
	}

	.conten {
		width: 750rpx;
		text-align: left;
		line-height: 100rpx;
	}

	.onecont {
		width: 600rpx;
		margin: auto;
		border-top: 4rpx solid #f7f7f7;
		border-bottom: 4rpx solid #f7f7f7;
		color: #787878;
	}

	.oneconts {
		width: 600rpx;
		margin: auto;
		border-bottom: 4rpx solid #f7f7f7;
		color: #787878;
	}

	.contenttext {
		font-weight: 600;
		font-size: 30rpx;
		width: 640rpx;
		margin: auto;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}

	.content {
		position: absolute;
		top: 280rpx;
		width: 750rpx;
		background-color: white;
		height: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.main {
		display: inline-block;
	}

	.main1 {
		display: inline-block;
		position: relative;
	}

	.headbox {
		width: 750rpx;
		height: 400rpx;
		background-image: url("https://5b0988e595225.cdn.sohucs.com/images/20180506/5d90818af37243a6a480f19ef42de305.gif");
		background-size: 100%;
	}

	.headtext {
		display: inline-block;
		position: absolute;
		top: -120rpx;
		left: 40rpx;
		width: 200rpx;
		color: white;
		font-size: 46rpx;
	}

	.img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-left: 120rpx;
		margin-top: 80rpx;
	}
</style>